import React from "react";
import "./css/login.css";
import logo from "./images/logo192.png";
// import { reqLogin } from "../../api";
import { Form, Input, Button, message } from "antd";
import { MailOutlined, LockOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import { useNavigate, Navigate } from "react-router-dom";
import { saveUserInfo } from "../../redux/action_creators/login_action";
import axios from "axios";

function Login(props) {
  const navigate = useNavigate();

  const reqLogin = async (email, password) => {
    try {
      const result = await axios.post(
        "http://api.shop.eduwork.cn/api/auth/login",
        { email, password }
      );
      const { status } = result;
      const data = {
        token: "Bearer " + result.data.access_token,
        user: {
          email: "",
        },
      };
      if (status === 200) {
        props.saveUserInfo(data);
        // 跳转到admin页面
        navigate("/admin/home");
      }
    } catch (err) {
      message.error("邮箱/密码错误");
    }
  };

  const onFinish = (values) => {
    const { email, password } = values;
    reqLogin(email, password);
  };

  if (props.userInfo.isLogin) {
    return <Navigate to="/admin/home" />;
  }

  return (
    <div className="login">
      <header className="login_header">
        <img className="logo" src={logo} alt="logo" />
        <h1>商品管理系统</h1>
      </header>
      <section className="login_section">
        <h1>用户登入</h1>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{}}
          onFinish={onFinish}
        >
          <Form.Item
            name="email"
            rules={[
              {
                required: true,
                message: "Please input your E-mail!",
              },
              {
                type: "email",
                message: "The input is not valid E-mail!",
              },
            ]}
          >
            <Input
              prefix={<MailOutlined className="site-form-item-icon" />}
              placeholder="Email"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your Password!",
              },
              { min: 4, message: "4 characters at least" },
              { max: 10, message: "10 characters at most" },
              // {
              //   pattern: /^\W+$/,
              //   message: "should including num, char and _",
              // },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登入
            </Button>
          </Form.Item>
        </Form>
      </section>
    </div>
  );
}

export default connect((state) => ({ userInfo: state.userInfo }), {
  saveUserInfo,
})(Login);
